{ "err_no": 0, "err_msg": "success", "data": { "booklet": { "booklet_id": "6844733705089449991", "base_info": { "id": 0, "booklet_id": "6844733705089449991", "title": "剖析 Vue.js 内部运行机制", "price": 990, "category_id": "6809637767543259144", "status": 1, "user_id": "289926769027053", "verify_status": 2, "summary": "把原理抽象为小 Demo，以一种对新手友好的方式带领读者漫游 Vue.js 的世界", "cover_img": "https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/1/16/160fdc404b36a1a0~tplv-t2oaga2asx-image.image", "section_count": 9, "section_ids": "6844733705102032909|6844733705211084808|6844733705227862023|6844733705228025869|6844733705232056327|6844733705232056334|6844733705232056328|6844733705236283405|6844733705236299789|6844733705236250632", "is_finished": 1, "ctime": 1513514520, "mtime": 1657625430, "put_on_time": 1598288808, "pull_off_time": 1598288671, "finished_time": 1596106629, "recycle_bin_time": -62135596800, "verify_time": -62135596800, "submit_time": 1652602680, "top_time": -62135596800, "wechat_group_img": "https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3f517ba7d5b84679be5a2f46b454ac15~tplv-k3u1fbpfcp-watermark.image?", "wechat_group_desc": "小册九姐", "wechat_group_signal": "ranmo2048", "read_time": 5156, "buy_count": 12574, "course_type": 1, "background_img": "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a37094b9c9b5491aad055a581f8b2fa1~tplv-k3u1fbpfcp-watermark.image?", "is_distribution": 1, "distribution_img": "https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/81e7d1fb158b482eaf44368fabfea021~tplv-k3u1fbpfcp-zoom-1.image?", "commission": 198, "can_vip_borrow": true, "is_sign": false }, "reading_progress": { "id": 0, "booklet_id": "6844733705089449991", "user_id": "3210229681503629", "status": 1, "buy_type": 1, "reading_end": 0, "reading_progress": 0, "last_section_id": "0", "has_update": 1, "last_rtime": 1516411305, "ctime": 1516411305, "mtime": 1658224862, "valid_begin_time": 0, "valid_end_time": 0, "borrow_times": 0 }, "user_info": { "user_id": "289926769027053", "user_name": "染陌同学", "company": "Alibaba", "job_title": "前端工程师", "avatar_large": "https://p6-passport.byteacctimg.com/img/user-avatar/18c3d15a16932ee0a7ec982876b297ec~300x300.image", "level": 4, "description": "大淘宝 前端架构", "followee_count": 118, "follower_count": 10450, "post_article_count": 36, "digg_article_count": 168, "got_digg_count": 3870, "got_view_count": 218645, "post_shortmsg_count": 37, "digg_shortmsg_count": 140, "isfollowed": false, "favorable_author": 1, "power": 5731, "study_point": 0, "university": { "university_id": "0", "name": "", "logo": "" }, "major": { "major_id": "0", "parent_id": "0", "name": "" }, "student_status": 0, "select_event_count": 0, "select_online_course_count": 0, "identity": 0, "is_select_annual": true, "select_annual_rank": 0, "annual_list_type": 0, "extraMap": {}, "is_logout": 0, "annual_info": [], "account_amount": 0, "user_growth_info": { "user_id": 289926769027053, "jpower": 0, "jscore": 301.8, "jpower_level": 0, "jscore_level": 4, "jscore_title": "进阶掘友", "author_achievement_list": [], "vip_level": 0, "vip_title": "" }, "is_vip": false }, "event_discount": null, "is_buy": true, "section_updated_count": 9, "is_new": false }, "introduction": { "id": 81483, "section_id": "6844733705102032909", "title": "介绍", "user_id": "289926769027053", "booklet_id": "6844733705089449991", "status": 1, "content": "

小册介绍

\n

之前写《Vue.js 源码解析》的时候笔者就一直在思考，如何写出让新手同学能够读懂的文章呢？当时采用通篇的源码加上注释的方式讲解，笔者发现这样做不但导致文章体量大代码多，而且对没有阅读过源码或者没有阅读大型项目源码经历的同学来说并不友好。因为源码中有很多细节的东西，这些东西对于理解整个项目的内部运行机制并不那么重要，应该是先理解内部运行机制，然后再去深剖这些细节。

\n
\n

那么怎么样让新手更容易理解这些内容呢？

\n

于是笔者就诞生了一个想法：把 Vue.js 的核心源码抽离出来，写成一个一个代码量更小更精细的 Demo ，形成一个简易版的 Vue.js 轮子，尝试用更少量的代码讲解核心部分内容，这样能更好地让人理解，毕竟大段的源码在没有上下文的情况下会让人觉得晦涩难懂。

\n
\n

所以这本小册就这样诞生啦，期望能以一种对新手更加友好的方式来讲解 Vue.js 内部运行机制。

\n

\"\"

\n

讲了那么多，我们还是要介绍一下 Vue.js 这一款优秀的 MVVM 框架。 Vue.js 是一款专注于视图层、用于构建用户交互界面的响应式渐进框架。除了大大提高了开发效率并降低了维护成本以外，它还拥有着优雅的 API 设计、快速上手的特性，这使它已经成为了目前主流前端框架之一。

\n

但是你们有没有思考过：

\n\n

很多同学并没有对其原理有一个更深一层的理解，导致在遇到一些难以琢磨的问题的时候会感到无从下手。

\n

本小册希望通过一种对新手更加友好直观的方式讲解 Vue.js 内部运行机制。把 Vue.js 拆分成多个小模块，讲解模块间的依赖以及调用关系。然后将源码核心部分抽离压缩，各个模块以小 Demo 的形式展现出来，用最少的代码讲解内部实现。掌握了这些模块的核心原理之后，再去阅读 Vue.js 源码或者是解决 Vue.js 的疑难杂症时，相信会更加得心应手。

\n

程序界的「二八定律」，百分之八十的问题可以运用百分之二十的知识来解决，而剩下的百分之二十的问题需要运用百分之八十的知识来解决。准备好那百分之八十的知识，才会在遇到有挑战的问题时更加游刃有余，机会永远留给准备好的人。

\n

\"\"

\n

本小册希望用一种对新手更加友好的方式来讲解 Vue.js 内部运行机制，带领大家漫游 Vue.js 的世界，旨在帮助每一名想要进一步学习 Vue.js 的开发者。

\n

作者介绍

\n

\"\"

\n

染陌，前端工程师，掘金专栏作者。\n前 C++ 后端工程师，技术涉猎广泛。GitHub 千星项目《Vue.js 源码解析》作者，对 Vue.js 有着较为深入的研究。

\n

GitHub：https://github.com/answershuto

\n

名人推荐

\n

\"\"

\n

\"\"

\n

你会学到什么？

\n\n

\"\"

\n
\n

了解基本实现有利于想去阅读 Vue.js 源码的同学更快更有效地阅读源码，不会再觉得大量的源码难以入手

\n
\n

适宜人群

\n\n

你需要准备什么？

\n\n

购买须知

\n
    \n
  1. 本小册为图文形式内容服务，共计 9 节，上线时间为 2018 年 1 月 17 日；
    2. \n
  2. 购买用户可享有小册永久的阅读权限；
    3. \n
  3. 购买用户可进入小册微信群，与作者互动；
    4. \n
  4. 掘金小册为虚拟内容服务，一经购买成功概不退款；
    5. \n
  5. 掘金小册版权归北京北比信息技术有限公司所有，任何机构、媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布/发表，违者将依法追究责任；
    6. \n
  6. 在掘金小册阅读过程中，如有任何问题，请邮件联系 xiaoce@xitu.io
    7. \n
", "draft_content": "", "draft_title": "介绍", "markdown_content": "", "markdown_show": "", "is_free": 1, "read_time": 286, "read_count": 0, "comment_count": 0, "ctime": 1513514520, "mtime": 1559393995, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, "sections": [ { "id": 74872, "section_id": "6844733705211084808", "title": "Vue.js 运行机制全局概览", "user_id": "289926769027053", "booklet_id": "6844733705089449991", "status": 1, "content": "", "draft_content": "", "draft_title": "Vue.js 运行机制全局概览", "markdown_content": "", "markdown_show": "", "is_free": 1, "read_time": 275, "read_count": 31828, "comment_count": 278, "ctime": 1513601971, "mtime": 1596007795, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 74882, "section_id": "6844733705227862023", "title": "响应式系统的基本原理", "user_id": "289926769027053", "booklet_id": "6844733705089449991", "status": 1, "content": "", "draft_content": "", "draft_title": "响应式系统的基本原理", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 251, "read_count": 18895, "comment_count": 133, "ctime": 1513861055, "mtime": 1596012063, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 74883, "section_id": "6844733705228025869", "title": "响应式系统的依赖收集追踪原理", "user_id": "289926769027053", "booklet_id": "6844733705089449991", "status": 1, "content": "", "draft_content": "", "draft_title": "响应式系统的依赖收集追踪原理", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 341, "read_count": 16195, "comment_count": 322, "ctime": 1513861475, "mtime": 1596003390, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 74884, "section_id": "6844733705232056327", "title": "实现 Virtual DOM 下的一个 VNode 节点", "user_id": "289926769027053", "booklet_id": "6844733705089449991", "status": 1, "content": "", "draft_content": "", "draft_title": "实现 Virtual DOM 下的一个 VNode 节点", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 239, "read_count": 11189, "comment_count": 64, "ctime": 1513861483, "mtime": 1593337105, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 74885, "section_id": "6844733705232056334", "title": "template 模板是怎样通过 Compile 编译的", "user_id": "289926769027053", "booklet_id": "6844733705089449991", "status": 1, "content": "", "draft_content": "", "draft_title": "template 模板是怎样通过 Compile 编译的", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 1495, "read_count": 12250, "comment_count": 100, "ctime": 1513861492, "mtime": 1594177792, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 74887, "section_id": "6844733705232056328", "title": "数据状态更新时的差异 diff 及 patch 机制", "user_id": "289926769027053", "booklet_id": "6844733705089449991", "status": 1, "content": "", "draft_content": "", "draft_title": "数据状态更新时的差异 diff 及 patch 机制", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 1378, "read_count": 12052, "comment_count": 114, "ctime": 1513861503, "mtime": 1590889007, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 74886, "section_id": "6844733705236283405", "title": "批量异步更新策略及 nextTick 原理", "user_id": "289926769027053", "booklet_id": "6844733705089449991", "status": 1, "content": "", "draft_content": "", "draft_title": "批量异步更新策略及 nextTick 原理", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 420, "read_count": 9712, "comment_count": 83, "ctime": 1513861498, "mtime": 1590573695, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 74888, "section_id": "6844733705236299789", "title": "Vuex 状态管理的工作原理", "user_id": "289926769027053", "booklet_id": "6844733705089449991", "status": 1, "content": "", "draft_content": "", "draft_title": "Vuex 状态管理的工作原理", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 309, "read_count": 7950, "comment_count": 18, "ctime": 1513861510, "mtime": 1582170597, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 74889, "section_id": "6844733705236250632", "title": "总结 & 常见问题解答", "user_id": "289926769027053", "booklet_id": "6844733705089449991", "status": 1, "content": "", "draft_content": "", "draft_title": "总结 & 常见问题解答", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 258, "read_count": 4974, "comment_count": 77, "ctime": 1513861515, "mtime": 1593677373, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null } ] } }